<template>
  <view class="container">
    <view @click="openPopup()">
      <up-input :placeholder="placeholder" border="surround" v-model="_value"
        :customStyle="{ width: '83vw', pointerEvents: 'none' }" readonly></up-input>
    </view>
    <cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble" @confirm="confirm"
      @cancel="cancel" :visible="visible" />
  </view>
</template>

<script>
import {
  useUserStore
} from '@/pinia-store/user'
import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
import {
  mapStores
} from 'pinia'

export default {
  props: {
    itemIndex: {
      type: Number,
      default: 0
    },
    placeholder: {
      type: String,
      default: '请输入内容'
    },
    value: {
      type: String,
      default: null
    },
    format: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    ApplyDetailList: {
      type: Array,
      default: () => {
        return []
      }
    },
    itemId: {
      type: String,
      required: true
    },
    titleItems: {
      type: String,
      default: null
    },
    label: {
      type: String,
      default: null
    },
    TableListValue: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
  components: {
    cityPicker
  },
  data () {
    return {
      visible: false,
      maskCloseAble: true,
      str: '',
      defaultValue: '321302',
      column: 3,
      _value: '',
    }
  },
  onReady () {

  },
  computed: {
    ...mapStores(useUserStore)
  },
  created () {
    this._value = this.getAddr(this.TableListValue);
    let value = uni.getStorageSync('formData');
    let formItems = JSON.parse(value.formItems);
    formItems.forEach(item => {
      if (item.title == this.title) {
        uni.removeStorageSync(`${item.id}`);
      }
    })
  },
  mounted () {
    this.setechodata()
  },
  watch: {
    _value: {
      handler (newValue) {
        let value = uni.getStorageSync('formData');
        let formItems = JSON.parse(value.formItems);
        formItems.forEach(item => {
          if (item.title == this.title) {
            console.log('item1', item);
            if (this.title == '出发地') {
              item.value = newValue;
              uni.setStorageSync(item.id, [{ "addr": `${newValue}`, "lng": 118.318695, "lat": 33.824382 }]);
            } else if (this.title == '目的地') {
              item.value = newValue;
              uni.setStorageSync(item.id, [{ "addr": `${newValue}`, "lng": 118.318695, "lat": 33.824382 }]);
            } else {
              item.value = newValue;
              uni.setStorageSync(item.id, newValue);
            }
          } else if (this.titleItems == item.title) {
            item.props.columns.forEach(columnsitem => {
              if (columnsitem.title == this.label) {
                columnsitem.value = newValue;
                uni.setStorageSync(columnsitem.id, [{ "addr": `${newValue}`, "lng": 118.318695, "lat": 33.824382 }]);
              }
            })
          }
        })
      }
    }
  },
  methods: {
    getAddr (value) {
      if (Array.isArray(value)) {
        return value.length > 0 ? value[0].addr || '' : '';
      } else if (value && typeof value === 'object') {
        return value.addr || '';
      }
      return '';
    },
    setechodata () {
      // 添加数据回显逻辑
      if (this.ApplyDetailList && this.ApplyDetailList.formData && this.itemId) {
        // 检查 formData 中是否存在当前 itemId 对应的字段 
        if (this.ApplyDetailList.formData.hasOwnProperty(this.itemId)) {
          // 获取对应的值
          const fieldValue = this.ApplyDetailList.formData[this.itemId];
          this._value = this.getAddr(fieldValue);
        }
      }
    },
    openPopup () {
      this.visible = true
    },
    confirm (val) {
      // console.log(val)
      this._value = val.name;
      this.visible = false;
      this.$emit('selectedTableList');
    },
    cancel () {
      this.visible = false
    }
  }
}
</script>

<style></style>
